//
// SuperTabsToolbar styles
//

//
// SuperTabs styles
//

super-tabs {

  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;

  > div.container {

    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    z-index: 1;


    > div.inner-container {

      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      box-sizing: content-box;

    }


  }

  &:not([no-shadow]) {

    //> super-tabs-toolbar > ion-toolbar.toolbar {
    //  &::after, &::before {
    //    position: absolute;
    //    background-image: url();
    //    background-repeat: repeat-x;
    //    width: 100%;
    //    left: 0;
    //  }
    //  &::after {
    //    content: '';
    //    height: 5px;
    //    background-position: 0 -2px;
    //    bottom: -5px;
    //  }
    //  contain: inherit;
    //  display: block;
    //  overflow: visible;
    //}

  }

}

ion-tabs super-tabs ion-content {
  .scroll-content, .fixed-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}





//
// SuperTab styles
//

super-tab {

  height: 100%;

  box-sizing: border-box;
  display: block;

  overflow: hidden;
  z-index: 1;

  flex-shrink: 0;
  position: relative;

}





//
// SuperTabsContainer styles
//

//super-tabs-container {
//
//  width: 100%;
//  overflow: hidden;
//  position: relative;
//  display: flex;
//  z-index: 1;
//
//  > div {
//    position: relative;
//    width: 100%;
//    height: 100%;
//    z-index: 1;
//    display: flex;
//    box-sizing: content-box;
//    touch-action: pan-y;
//    user-select: none;
//    -webkit-user-drag: none;
//    -webkit-tap-highlight-color: rgba(0,0,0,0);
//  }
//
//}





//
// SuperTabsToolbar styles
//
super-tabs-toolbar {

  z-index: 2;
  width: 100%;
  display: block;

  > ion-toolbar.toolbar {

    padding: 0;
    min-height: 0;

    .tab-buttons-container {
      touch-action: pan-y;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      //overflow: hidden;

      .tab-buttons {
        display: flex;
        width: 100%;
        overflow-x: auto;
        super-tab-button {
          &:not(.selected) {
            span:not(.badge) {
              opacity: 0.7;
            }
          }
          text-align: center;
          width: 0;
          height: 40px;
          line-height: 40px;
          font-weight: 500;
          font-size: 14px;
          text-transform: uppercase;

          margin-left: 0;
          margin-right: 0;

          position: relative;
          display: block;
          overflow: hidden;

          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;

          .title {
            vertical-align: middle;
            display: block;
          }

          .badge {
          }
        }
      }

      .indicator {
        bottom: 0;
        position: absolute;
        z-index: 2;
        height: 2px;
        width:20%;
        //transform: scaleX(0);
        //transform-origin: 0;
      }

    }

    &.scroll-tabs {
      .tab-buttons-container {
        //padding-left: 60px;

        .tab-buttons {
          position: relative;
          justify-content: flex-start;
          super-tab-button {
            min-width: 50px;
            max-width: 100%;
            width: auto;
            display: inline-table;
            overflow: visible;

          }
        }

        .indicator {
          position: relative;
          margin-top: -2px;
        }

      }
    }

  }

}